<template>
  <div class="tab-bar">
    <div 
      v-for="item in tabItems" 
      :key="item.name"
      class="tab-item"
      :class="{ active: currentRoute === item.path }"
      @click="$router.push(item.path)"
    >
      <i class="fa" :class="item.icon"></i>
      <span class="tab-text">{{ item.title }}</span>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { computed } from 'vue'

const router = useRouter()

// 当前路由
const currentRoute = computed(() => router.currentRoute.value.path)

// 底部导航项
const tabItems = computed(() => {
  return router.getRoutes()
    .filter(route => route.meta.showInTab)
    .map(route => ({
      name: route.name,
      path: route.path,
      title: route.meta.title,
      icon: `fa-${route.meta.icon}`
    }))
})
</script>

<style scoped>
.tab-bar {
  display: flex;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background-color: #fff;
  border-top: 1px solid #eee;
  z-index: 100;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #666;
  padding-top: 5px;
}

.tab-item.active {
  color: #42b983;
}

.tab-item i {
  font-size: 20px;
  margin-bottom: 2px;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  z-index: 100;
}

/* 适配 Web 端左侧导航栏样式 */
.web-left-bar {
  flex-direction: column;
}

/* 移动端底部导航栏样式 */
:not(.web-left-bar).tab-bar {
  height: 50px;
  border-top: 1px solid #eee;
}
</style>
